<template>
	<div>
		<router-link class="header-abs" v-show="showAbs" to="/" tag="div">
			<span class= "iconfont back-icon" >&#xe60a;</span>
		</router-link>
		<div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
			选择城市
			<router-link to="/" >
				<div class="iconfont header-fixed-back">&#xe603;</div>
			</router-link>
		</div>
	</div>
</template>

<script>
	export default{
		name: 'detailHeader',
		data () {
			return {
				showAbs:true,
				opacityStyle:{
					opacity:0
				}
			}
		},
		methods: {
			handleScroll () {
				const top=document.documentElement.scrollTop
				if(top>60){
					let opacity = top/206
					opacity = opacity > 1 ? 1 : opacity
					this.opacityStyle={opacity}
					this.showAbs = false
				}
				else
					this.showAbs=true
			}
		},
		activated () {
			window.addEventListener('scroll',this.handleScroll)
		},
		//页面即将隐藏时调用
		deactivated () {
			window.removeEventListener('scroll',this.handleScroll)
		}
	}
</script>

<style lang="stylus" scoped>
	@import "~styles/varibles.styl";
	.header-abs
		position:absolute
		left:0
		top:0
		padding:.1rem
		.back-icon
			font-size:.72rem
	.header-fixed
		position:fixed
		top:0
		left:0
		width:100%;
		height:$headerHeight
		line-height:$headerHeight
		background:$bkColor
		color:#fff
		text-align:center
		.header-fixed-back
			position:absolute
			left:0
			top:0
			font-size:.5rem
			width:.64rem
			text-align:center
			color:#fff
</style>